<%@page import="java.util.List"%>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>报修申请</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="description" content="北京规划院 移动办公 OA 自动化">
		<link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
		<link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.1.1/css/jquery-weui.min.css">
		<%
		    String appid  = (String)request.getAttribute("appId");
		    String nonceStr  = (String)request.getAttribute("nonceStr");
		    String timestamp = (String)request.getAttribute("timestamp");//10
		    String signature = (String)request.getAttribute("signature");
		    String userid=(String)request.getAttribute("loginuser");				
		%>
		<style>
		.weui-cells {
		    margin-top:0;
		}
		.weui-flex__item{
			margin:8px
		}
		.weui-mask,.weui-dialog {
		    opacity: 1;
		    visibility: visible;
		}
		.weui-dialog__bd {
			line-height:40px
		}
		</style>
	</head>

	<body style="background: #F4F4F4;">
	<div class="page" id="container">
	<div class="weui-cells weui-cells_form">
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">报修人</label></div>
				<div class="weui-cell__bd">
					<input class="weui-input" type="number" placeholder="请输入你的姓名">
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
				<div class="weui-cell__bd">
					<input class="weui-input" type="number" placeholder="请输入你的手机号">
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">维修位置</label></div>
				<div class="weui-cell__bd">
					<input class="weui-input" type="number" placeholder="请输入报修位置">
				</div>
			</div>
		</div>
		<div class="weui-cells weui-cells_form">
			<div class="weui-cell weui-cell_switch">
				<div class="weui-cell__bd">紧急情况</div>
				<div class="weui-cell__ft">
					<input class="weui-switch" type="checkbox">
				</div>
			</div>
			<div class="weui-cell">
					<div class="weui-cell__bd">
						<textarea class="weui-textarea" placeholder="报修详情" rows="3" id="other"></textarea>
						<div class="weui-textarea-counter"><span>0</span>/200</div>
					</div>
					<div class=weui-cell__ft> <i class=weui-icon-warn></i> </div>
				</div>
		</div>
		<div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">图片上传</p>
                            <div class="weui-uploader__info">0/4</div>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles">
                                </ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
					<div class="weui-flex" style="position: absolute;bottom: 0;width: 100%;">
						<div class="weui-flex__item" id="sumbit">
							<div class="placeholder">
								<a href="javascript:;" class="weui-btn weui-btn_primary">提交</a>
							</div>
						</div>
						<div class="weui-flex__item">
							<div class="placeholder">
								<a href="javascript:;" class="weui-btn weui-btn_default">返回</a>
							</div>
						</div>
					</div>
		</div>
		<div class="page dialog js_show">
		    <div id="dialogs">
		        <!--BEGIN dialog2-->
		        <div class="js_dialog" id="iosDialog2" style="display:none">
		            <div class="weui-mask"></div>
		            <div class="weui-dialog">
		            	<div class="weui-dialog__hd"><strong class="weui-dialog__title">提交成功！</strong></div>
		                <div class="weui-dialog__bd">3s后将跳转至我的保修单页面</div>
		                <div class="weui-dialog__ft">
		                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
		                </div>
		            </div>
		        </div>
		        <!--END dialog2-->
		    </div>
		</div>
		<script src="${base}/js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="${base}/js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
		<script src="${base}/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		/* var sdata
		$.ajaxSettings.async = false;
		$.post("${base}/repair/JsJson",function(data){
			sdata=data
		})
		console.log(sdata) */
		$.ajaxSettings.async = false;
			wx.config({
				beta: true,
				debug: false,
				appId: '<%=appid %>',
				timestamp: '<%=timestamp %>',
				nonceStr: '<%=nonceStr %>',
				signature: '<%=signature %>',
				jsApiList: [
					'checkJsApi',
					'onMenuShareAppMessage',
					'onMenuShareWechat',
					'startRecord',
					'stopRecord',
					'onVoiceRecordEnd',
					'playVoice',
					'pauseVoice',
					'stopVoice',
					'uploadVoice',
					'downloadVoice',
					'chooseImage',
					'previewImage',
					'uploadImage',
					'downloadImage',
					'getNetworkType',
					'openLocation',
					'getLocation',
					'hideOptionMenu',
					'showOptionMenu',
					'hideMenuItems',
					'showMenuItems',
					'hideAllNonBaseMenuItem',
					'showAllNonBaseMenuItem',
					'closeWindow',
					'scanQRCode',
					'previewFile',
					'openEnterpriseChat',
					'selectEnterpriseContact',
					'onHistoryBack'
				]
			});
			wx.checkJsApi({
				jsApiList: ['openEnterpriseChat'], // 需要检测的JS接口列表，所有JS接口列表见附录2,	
				success: function(res) {
					alert(res)
				}
				// 以键值对的形式返回，可用的api值true，不可用为false
	
			});
			var serverIds=[];
			var localIds
			$("#uploaderInput").click(function(){
				wx.chooseImage({						
			           count:4,//设置一次能选择的图片的数量 
			           sizeType:['original','compressed'],//指定是原图还是压缩,默认二者都有
			           sourceType:['album','camera'],//可以指定来源是相册还是相机,默认二者都有
			           success:function(res){   //微信返回了一个资源对象 
			　　　　　　　　　//res.localIds 是一个数组　保存了用户一次性选择的所有图片的信息　　　　
			               localIds=res.localIds;//把图片的路径保存在images[localId]中--图片本地的id信息，用于上传图片到微信浏览器时使用
 			               
/* 			               var tempFilePaths=res.tempFilePaths();
			               alert(tempFilePaths);  */
			               //upLoadToServer();//上传到我们自己的服务器
			               ulLoadToWechat(0); //把这些图片上传到微信服务器  一张一张的上传
			               //上传到自己的东西
			               $(".weui-uploader__info").html(localIds.length+"/6")
					        var html="";
					        for(var i=0;i<localIds.length;i++){
					        	html+='<li class="weui-uploader__file weui-uploader__file_status" data-url="'+localIds[i]+'" style="background-image:url('+localIds[i]+')"></li>'
					        }
					        $.po
					        $("#uploaderFiles").html(html)
			            }
			       });
				/* wx.chooseImage({
				    count:4, // 默认9
				    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
				    success: function (res) {
				        localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
				        $(".weui-uploader__info").html(localIds.length+"/6")
				        var html="";
				        for(var i=0;i<localIds.length;i++){
				        	html+='<li class="weui-uploader__file weui-uploader__file_status" data-url="'+localIds[i]+'" style="background-image:url('+localIds[i]+')"></li>'
				        	 wx.uploadImage({
								    localId: localIds[i], // 需要上传的图片的本地ID，由chooseImage接口获得
								    isShowProgressTips: 1, // 默认为1，显示进度提示
								    success: function (res) {
								        var serverId = res; // 返回图片的服务器端ID
								        img_serverId.push(serverid)
								    }
								});
				        }
				        $("#uploaderFiles").html(html)
				    
				    }
				}); */
			})
			//上传图片到微信
			function ulLoadToWechat(i){
			    length = localIds.length; //本次要上传所有图片的数量
			    wx.uploadImage({
			        localId: localIds[i], //图片在本地的id
			        success: function (res) {//上传图片到微信成功的回调函数   会返回一个媒体对象  存储了图片在微信的id
			            serverIds.push(res.serverId);
			            i++;
			            if (i < length) {
			                ulLoadToWechat(i);
			            }
			        },
			        fail: function (res) {
			            alert(JSON.stringify(res));
			        }
			    });  
			};
			$("#uploaderFiles").on("click","li",function(){
				wx.previewImage({
				    current: '', // 当前显示图片的http链接
				    urls: localIds // 需要预览的图片http链接列表
				});
			});			
			$("#sumbit").click(function(){
				$('#iosDialog2').show()
				var jsonstr=serverIds.toString();
				//后台请求方法去获取
				$.post("${base}/repair/uploadData", {
					server: jsonstr,
				}, function(data) {
					if(data.res == true) {
						alert("创建成功")
					} else {
						alert("创建失败")
					}
				})
				//扔到我自己的后台
				//这里直接上传居然报错了
				//alert(logcaiton.href);
				//location.href="ImgUpload("serverIds.toString()")";
/* 				 var i=3;
				 setInterval(function(){
					 i--;
					$(".weui-dialog__bd").html(i+"s后将跳转至我的保修单页面") 
					if(i==0){
						location.href="index.jsp"+serverIds.toString()
					}
				 },1000)	 */			
			})
		</script>
	</body>
</html>